@import url('../../utils/less/base.less');

.page {
    &>.list {
        .overflow-hidden();
        padding: 0 32rpx;
        &>.item {
            .bgcolor(white);
            .radius(20rpx);
            margin: 20rpx 0;
            padding: 20rpx;
            &>.info {
                &>.name {
                    &>.name-nick {
                        .text(32rpx, #16ad91);
                        font-weight: bold;
                    }
                    &>.age {
                        margin-left: 30rpx;
                    }
                    &>.sex {
                        margin-left: 30rpx;
                    }
                }
                &>.birthday {
                    .text(#999);
                    margin-top: 14rpx;
                }
            }
            &>.option {
                .flex-end();
                &>.edit {
                    .text(#0094ea);
                    padding: 0 16rpx;
                }
                &>.del {
                    .text(#ff542d);
                    padding: 0 16rpx;
                }
            }
        }
        &>.list-status {
            .text(center, #999);
            margin: 20rpx 0;
        }
    }
    &>.add {
        .bgcolor(#16ad91);
        .text(white, center, 30rpx);
        .flex-center(center);
        .fixed(bl);
        z-index: 1;
        width: 100%;
        height: 94rpx;
        &>.addincon {
            .text(42rpx);
        }
    }
    &>.placeholder {
        height: 94rpx;
    }
}
.container {
    .bgcolor(white);
    .text(28rpx);
    .radius(30rpx);
    .overflow-hidden();
    width: 80vw;
    &>.title {
        .text(white, center);
        .bgcolor(#16ad91);
        padding: 20rpx 0;
    }
    &>.form {
        &>.item {
            .flex-start(center);
            padding: 0 32rpx;
            margin: 20rpx 0;
            &>.title {
                .flex(none);
                line-height: 1;
            }
            &>.input {
                .flex(auto);
                padding: 0 20rpx;
                height: 56rpx;
                border: 2rpx solid #ddd;
            }
            &>.sex-picker {
                .flex(auto);
                & .sex-picker-row {
                    .flex-start(center);
                    height: 56rpx;
                    padding: 0 20rpx;
                }
            }
        }
    }
    &>.confirm-btn {
        .text(white, center);
        .bgcolor(#16ad91);
        .radius(10rpx);
        margin: 0 auto;
        width: 300rpx;
        padding: 20rpx 0;
        margin-bottom: 30rpx;
    }
}